<template>
  <div class="tabbar bt ajc wm">
    <p
      v-for="(item,index) in lists"
      :key="index"
      @click="change(index)"
      :class="{blue:isBlue==index}"
    >
      <img :src="item.image" v-show="isBlue!==index" />
      <img :src="item.imageHide" v-show="isBlue==index" />
      <span>{{item.name}}</span>
    </p>
  </div>
</template>

<script>
import sy from "../assets/sy.png";
import syr from "../assets/syr.png";
import qd from "../assets/qd.png";
import qdr from "../assets/qdr.png";
import wd from "../assets/wd.png";
import wdr from "../assets/wdr.png";
export default {
  data() {
    return {
      isBlue: -1,
      lists: [
        { name: "首页", image: sy, imageHide: syr },
        { name: "抢单", image: qd, imageHide: qdr },
        { name: "我的", image: wd, imageHide: wdr }
      ]
    };
  },
  created() {},
  methods: {
    change(i) {
      this.isBlue = i;
      if (i == 0) {
        this.$router.push("index");
      } else if (i == 1) {
        this.$router.push("publish");
      } else if (i == 2) {
        this.$router.push("user");
      }
    }
  }
};
</script>

<style lang='less'>
.blue {
  span {
    color: red;
  }
}
.tabbar {
  position: fixed;
  bottom: 0;
  background-color: #fff;
  p {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 33.3%;
    padding: 1px 0;
    span {
      display: flex;
    }
  }
  p:nth-child(1) {
    img {
      width: 20%;
      padding: 2px 0;
    }
  }
  p:nth-child(2) {
    img {
      width: 18%;
      padding: 2px 0;
    }
  }
  p:nth-child(3) {
    img {
      width: 25%;
    }
  }
}
</style>